<!DOCTYPE html>
<html lang="en">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<head>
    <meta charset="UTF-8">
    <title>Registration page</title>
    <style>
        
        .rg_layout {
            width: 950px;
            height: 300px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        
        .rg_left {
            float: left;
            margin: 15px;
        }
        .rg_center {
            float: left;
        }
        .rg_right {
            float: right;
            margin: 15px;
        }
        
        .rg_left > p:first-child {
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color:#A6A6A6;
            font-size: 20px;
        }
        
        .rg_right > p:first-child {
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }
        
        .td_left {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right {
            padding-left: 50px ;
        }
        
        
        #success_box{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        
        #checkcode {
            width: 110px;
        }
        
        #img_check {
            height: 32px;
            vertical-align: middle;
        }
        
        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
        
        .error {
            color:red;
        }
        #td_sub {
            padding-left: 150px;
        }
    </style>
    <script>
        window.onload = function(){
            document.getElementById("btn_sub").onclick = function(){
                var flag0 = checkUsername();
                var flag1 = checkPassword();
                console.log($("#username").val())
                console.log($('input:radio[name="gender"]:checked').val())
                if(flag0&&flag1){
                    $.ajax({
                        url: "/Registration/insertUser", 
                        type: "POST",  
                        data:{
                          'username':$("#username").val(),
                          'password':$("#password").val(),
                          'gender':$('input:radio[name="gender"]:checked').val(),
                          'birthday':$("#birthday").val(),
                          'weight':$("#weight").val(),
                          'height':$("#height").val(),
                          'doc_name':$("#doc_name").val(),
                          'doc_visit_date':$("#doc_visit_date").val(),
                          'annual_checkup':$("#annual_checkup").val(),
                          },
                          success: function (result) {
                              if(result.message == "success"){
                                  
                                console.log('you id is: ',result.id)
                                alert("register success")
                                location.href="/Login"
                              }
                              else{

                                alert("register failed")
                              }
                          }
                        });
                }
                else{
                    alert("Incorrect")
                }
            };
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
            document.getElementById("re_password").onblur = checkRePassword;
        };
        

    </script>
</head>
<body>

<div class="rg_layout">

    <div class="rg_left">
        <p>REGISTER SUCCESS</p>
    </div>

    <div class="rg_center">
        
        <h3>Your id is {{id}}</h3> 
        <h3>Please keep it which is needed when you Login in!</h3>
    </div>
    <a class="rg_center" href="/Login">Back</a>
</div>

</body>
</html>
